<!-- 用户详情 -->
<script setup>
import pageComponent from '@/components/pageComponent.vue'
import { ref } from 'vue'
import { userUpInfoService } from '@/api/user.js'
import { useUserStore } from '@/stores/counter.js'
const formData = ref({
  id: '', //用户id
  username: '', //用户名
  nickname: '', //昵称
  email: '', //邮箱
  user_pic: '' //用户头像
})
const user = useUserStore()
formData.value = user.getUserInof()
const rule = {
  username: [],
  nickname: [
    {
      required: true,
      message: '请输入昵称',
      trigger: 'blur'
    }
  ],
  email: [
    {
      required: true,
      message: '请输入邮箱',
      trigger: 'blur'
    },
    {
      pattern: /^[a-zA-Z0-9@.]{1,12}$/,
      message: '邮箱格式不规范！',
      trigger: 'blur'
    }
  ]
}
//提交修改
const subUpdata = async () => {
  console.log(formData.value)
  await userUpInfoService(formData.value)
  ElMessage.success('修改成功！')
  formData.value = user.getUserInof()
}
</script>

<template>
  <div class="box">
    <pageComponent title="基本资料">
      <el-form
        :model="formData"
        :rules="rule"
        class="form"
      >
        <el-form-item
          label="登录名称"
          prop="username"
        >
          <el-input
            v-model="formData.username"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item
          label="用户昵称"
          prop="nickname"
        >
          <el-input
            v-model="formData.nickname"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="用户邮箱"
          prop="email"
        >
          <el-input
            v-model="formData.email"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        class="button"
        @click="subUpdata"
      >
        提交修改
      </el-button>
    </pageComponent>
  </div>
</template>

<style scoped>
.box {
  width: 100%;
}

.form {
  width: 50%;
}

.button {
  margin-left: 10%;
}
</style>
